<template>
  <div>
    <div class="stricky-header stricked-menu main-menu">
      <div class="sticky-header__content"></div>
    </div>
    <section class="page-header">
      <div
        class="page-header__bg"
        style="
          background-image: url(assets/images/backgrounds/page-header-bg-1-1.jpg);
        "
      ></div>

      <!-- <div class="container">
          <h2>Product</h2>
          <ul class="thm-breadcrumb list-unstyled">
            <li>
              <a
                href="index.html"
                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/index.html"
                >Home</a
              >
            </li>
            <li>/</li>
            <li><span>Product</span></li>
          </ul>
        </div> -->
    </section>
    <section class="product_detail">
      <div class="container">
        <div class="row">
          <div class="col-xl-6 col-lg-6">
            <div class="product_detail_image">
              <img :src="goods.image" alt="" />
            </div>
          </div>
          <div class="col-xl-6 col-lg-6">
            <div class="product_detail_content">
              <h2>{{ goods.name }}</h2>
              <div class="product_detail_review_box">
                <div class="product_detail_price_box">
                  <p>${{ goods.price }}</p>
                </div>
                <div class="product_detail_review">
                  <a href="#"><i class="fa fa-star"></i></a>
                  <a href="#"><i class="fa fa-star"></i></a>
                  <a href="#"><i class="fa fa-star"></i></a>
                  <a href="#"><i class="fa fa-star"></i></a>
                  <a href="#" class="deactive"><i class="fa fa-star"></i></a>
                  <span>2 Customer Reviews</span>
                </div>
              </div>
              <div class="product_detail_text">
                <p>
                  {{ goods.introduction }}
                </p>
              </div>
              <ul class="list-unstyled product_detail_address">
                <li>REF. 4231/406</li>
                <li>Available in store</li>
              </ul>
              <div class="product-quantity-box">
                <div class="quantity-box">
                  <!-- <button type="button" class="sub" @click="goods.num--">
                      -
                    </button>
                    <input type="number" :id="goods.id" :value="goods.num" />
                    <button type="button" class="add" @click="goods.num++">
                      +
                    </button> -->
                </div>
                <div class="addto-cart-box">
                  <button
                    class="thm-btn"
                    type="submit"
                    @click="joinCart(goods)"
                  >
                    添加到购物车
                  </button>
                </div>
                <div class="wishlist_btn">
                  <a href="#" class="thm-btn">Add to Wishlist</a>
                </div>
              </div>
              <ul class="list-unstyled category_tag_list">
                <li><span>分类:</span> {{ goods.categoryName }}</li>
                <li><span>标签:</span> {{ goods.categoryName }}</li>
              </ul>
              <div class="product_detail_share_box">
                <div class="share_box_title">
                  <h2>分享给朋友</h2>
                </div>
                <div class="share_box_social">
                  <a
                    href="http://wpa.qq.com/msgrd?v=3&uin=981247127&site=qq&menu=yes"
                    target="_blank"
                    class="fab fa-qq"
                  ></a>
                  <a href="#" class="fab fa-weixin"></a>
                  <a href="#" class="fab fa-weibo"></a>
                  <a href="#"><i class="fab fa-facebook-square"></i></a>
                  <a href="#"><i class="fab fa-twitter"></i></a>
                  <a href="#"><i class="fab fa-instagram"></i></a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-xl-12">
            <div class="product-tab-box tabs-box">
              <ul class="tab-btns tab-buttons clearfix list-unstyled">
                <li data-tab="#desc" class="tab-btn active-btn">
                  <span>商品描述</span>
                </li>
                <li data-tab="#addi__info" class="tab-btn">
                  <span>附加信息</span>
                </li>
                <li data-tab="#review" class="tab-btn">
                  <span>评论</span>
                </li>
              </ul>
              <div class="tabs-content">
                <div class="tab active-tab" id="desc">
                  <div class="product-details-content">
                    <div class="desc-content-box">
                      <p v-html="goods.introduction"></p>
                      <p
                        class="desc-content-box_bottom"
                        v-html="goods.description"
                      ></p>
                    </div>
                  </div>
                </div>
                <div class="tab" id="addi__info">
                  <ul class="additionali_nfo list-unstyled">
                    <li :key="adds.id" v-for="adds in goods.additions">
                      <span>{{ adds.name }}:</span>{{ adds.value }}
                    </li>
                  </ul>
                </div>
                <div class="tab" id="review">
                  <div class="reviews-box">
                    <div class="row">
                      <div class="col-xl-12">
                        <div class="product_reviews_box">
                          <h3 class="product_reviews_title">
                            2 Product reviews
                          </h3>
                          <div class="product_reviews_single">
                            <div class="product_reviews_image">
                              <img
                                src="assets/images/products/review-1.jpg"
                                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/assets/images/products/review-1.jpg"
                                alt=""
                              />
                            </div>
                            <div class="product_reviews_content">
                              <h3>Kevin Martins<span>15 Nov, 2019</span></h3>
                              <p>
                                Lorem ipsum is simply free text used by
                                copytyping refreshing. Neque porro est qui
                                dolorem ipsum quia quaed inventore veritatis et
                                quasi architecto beatae vitae dicta sunt
                                explicabo.
                              </p>
                              <div
                                class="
                                  product_reviews_rating product_detail_review
                                "
                              >
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#" class="deactive"
                                  ><i class="fa fa-star"></i
                                ></a>
                              </div>
                            </div>
                          </div>
                          <div class="product_reviews_single">
                            <div class="product_reviews_image">
                              <img
                                src="assets/images/products/review-2.jpg"
                                tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/assets/images/products/review-2.jpg"
                                alt=""
                              />
                            </div>
                            <div class="product_reviews_content">
                              <h3>Kevin Martins<span>15 Nov, 2019</span></h3>
                              <p>
                                Lorem ipsum is simply free text used by
                                copytyping refreshing. Neque porro est qui
                                dolorem ipsum quia quaed inventore veritatis et
                                quasi architecto beatae vitae dicta sunt
                                explicabo.
                              </p>
                              <div
                                class="
                                  product_reviews_rating product_detail_review
                                "
                              >
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#"><i class="fa fa-star"></i></a>
                                <a href="#" class="deactive"
                                  ><i class="fa fa-star"></i
                                ></a>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="col-xl-12">
                        <div class="add_review_box">
                          <h3 class="add_review_title">Add a review</h3>
                          <div class="add_review_rating">
                            <span>Rate this Product?</span>
                            <a href="#"><i class="fa fa-star"></i></a>
                            <a href="#"><i class="fa fa-star"></i></a>
                            <a href="#"><i class="fa fa-star"></i></a>
                            <a href="#"><i class="fa fa-star"></i></a>
                            <a href="#" class="deactive"
                              ><i class="fa fa-star"></i
                            ></a>
                          </div>
                          <form class="add_review_form" action="#">
                            <div class="row">
                              <div class="col-md-12">
                                <div class="input-box">
                                  <textarea
                                    name="review"
                                    placeholder="Write review"
                                    required=""
                                  ></textarea>
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-md-6">
                                <div class="input-box">
                                  <input
                                    type="text"
                                    name="name"
                                    placeholder="Full name"
                                    required=""
                                  />
                                </div>
                              </div>
                              <div class="col-md-6">
                                <div class="input-box">
                                  <input
                                    type="email"
                                    name="email"
                                    placeholder="Email address"
                                    required=""
                                  />
                                </div>
                              </div>
                            </div>
                            <div class="row">
                              <div class="col-xl-12">
                                <div class="review_submit_btn">
                                  <a href="#" class="thm-btn">Submit Review</a>
                                </div>
                              </div>
                            </div>
                          </form>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 关联商品 -->
    <section class="product-two">
      <div class="container">
        <div class="block-title text-center">
          <div class="block-title__decor"></div>
          <p>Recently Added</p>
          <h3>Similar Products</h3>
        </div>
        <div
          class="thm-tiny__slider"
          id="product-two__carousel"
          data-tiny-options='{
            "container": "#product-two__carousel",
            "items": 1,
            "slideBy": "page",
            "gutter": 0,
            "mouseDrag": true,
            "autoplay": true,
            "nav": false,
            "controlsPosition": "bottom",
            "controlsText": ["<i class=\"fa fa-angle-left\"></i>", "<i class=\"fa fa-angle-right\"></i>"],
            "autoplayButtonOutput": false,
            "responsive": {
                "640": {
                  "items": 2,
                  "gutter": 30
                },
                "992": {
                  "gutter": 30,
                  "items": 3
                },
                "1200": {
                  "disable": true
                }
              }
        }'
        >
          <div :key="goods.id" v-for="goods in goodses">
            <div class="product-card__two">
              <div class="product-card__two-image">
                <span v-if="goods.id == 2" class="product-card__two-sale"
                  >sale</span
                >
                <img :src="goods.image" alt="" />
                <div class="product-card__two-image-content">
                  <a href="#"><i class="organik-icon-visibility"></i></a>
                  <a href="#"><i class="organik-icon-heart"></i></a>
                  <a
                    href="cart.html"
                    tppabs="https://www.17sucai.com/preview/776298/2021-05-10/oganik/cart.html"
                    ><i class="organik-icon-shopping-cart"></i
                  ></a>
                </div>
              </div>
              <div class="product-card__two-content">
                <h3>
                  <a :href="'product-details.html?id=' + goods.id">{{
                    goods.name
                  }}</a>
                </h3>
                <div class="product-card__two-stars">
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                  <i class="fa fa-star"></i>
                </div>
                <p>$ {{ goods.price }}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import router from "@/router/routers";
import { recently, filter, getOne } from "@/api/goods";

export default {
  // components: {
  //   Footer,
  //   Header,
  //   SearchPopup,
  // },
  data() {
    return {
      categories: [],
      goodses: [],
      goods: {
        id: "",
        cid: "",
        name: "",
        price: "",
        image: "",
        images: [{ name: "", url: "" }],
        srcList: [],
        status: "",
        introduction: "",
        description: "",
        categoryName: "",
        additions: [{ name: "", value: "" }],
      },
      options: [
        {
          value: "id",
          label: "根据商品ID排序",
        },
        {
          value: "on_time",
          label: "根据上架时间排序",
        },
      ],
      price: [0, 50],
      keyword: "",
      orderBy: "",
      category: "",
      limit: 6,
      queryWrappe: {
        orderBy: "",
        categoryId: "",
        priceMin: "",
        priceMax: "",
        keyWord: "",
        limit: 6,
      },
    };
  },
  watch: {
    orderBy() {
      this.onFilter();
    },
  },
  mounted() {
    // P1 任务
    let p1 = new Promise((resolve) => {
      let kvs = location.search.substr(1).split("&");
      let p = {};
      for (let i = 0; i < kvs.length; i++) {
        let kv = kvs[i].split("=");
        if (kv.length == 2) {
          p[kv[0]] = decodeURI(kv[1]);
        }
      }
      console.log(p.id);
      if (p.id == undefined) {
        resolve(true);
        this.$message("未选择商品");
        router.push({ path: "/products.html" });
      } else {
        getOne(p.id).then((res) => {
          this.goods = res;
          if (res == "NotFound") {
            router.push({ path: "/products.html" });
          }
          console.log(this.goods);
          resolve(true);
        });
      }
    });
    // P2 任务
    let p2 = new Promise((resolve) => {
      recently().then((goodses) => {
        this.goodses = goodses;
        resolve(true);
      });
    });
    // 当所有的任完成之后, 执行如下回调函数
    Promise.all([p1, p2]).then(() => {
      console.log("初始化完成");
    });
  },
  methods: {
    joinCart(goods) {
      console.log(goods);
      this.$refs.minicart.joinCart(goods);
    },
    onFilter() {
      this.queryWrappe.priceMin = this.price[0];
      this.queryWrappe.priceMax = this.price[1];
      this.queryWrappe.orderBy = this.orderBy;
      this.queryWrappe.categoryId = this.category.id;
      this.queryWrappe.keyWord = this.keyword;
      this.queryWrappe.limit = this.limit;

      console.log(this.queryWrappe);
      filter(this.queryWrappe).then((res) => {
        console.log(res);
        this.goodses = res;
      });
    },
  },
};
</script>

<style scoped>
</style>